<template>
  <div ref="refTopicList" class="topic-list-wrap">
    <div class="topic-item" :class="item.name" v-for="(item,index) in topicList" :key="index" @click="goPath(item)">
      <p class="title">{{item.sceneName}}</p>
      <p class="link">{{item.linkText}}</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import HomeServe from '@/api/home'
import { showToast } from 'vant'
defineOptions({
  name: 'TopicList'
})

const topicList = ref([])

const emit = defineEmits(['switch'])

const router = useRouter()

//获取推荐专题
const getScenes = () => {
  HomeServe.getScenes().then(res=>{
    if(res.data){
      res.data.forEach(ele=>{
        ele.name = filterName(ele.sceneName);
        ele.linkText = filterText(ele.sceneName);
      })
      topicList.value = res.data;
    }
  })
}

getScenes()

const filterName = (name: string, text: string) => {
  let icon = ""
  switch (name) {
    case '事件专区':
      icon = 'sjzq';
      break;
    case '视频专区':
      icon = 'spzq';
      break;
  }
  return icon
}

const filterText = (text: string) => {
  let msg = "进入专题";
  if(text.indexOf('专区')>-1){
    msg = "进入专区"
  }
  return msg
}
const goPath = (item) => {
  if(item.sceneName == '事件专区') {
    goSelfPath('/event')
  } else if(item.sceneName == '视频专区') {
    goSelfPath('/zone/video')
  } else if(item.sceneName == '项目专区'){
    goSelfPath('/project')
  } else {
    if(item.sceneUrl) {
      window.open(item.sceneUrl)
    }else{
      showToast("正在建设中...")
    }
  }
  
}

const goSelfPath = (url: string) => {
  router.push({
    path: url
  })
}

</script>

<style lang="less" scoped>
.topic-list-wrap {
  border-radius: 4px;
  background: rgba(255,255,255,0.9);
  margin: 12.5px 12px;
  padding: 10px 10px 0;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.03);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .topic-item{
    background: url("@/assets/home/topic-bg.png") no-repeat center center;
    background-size: 160px 111px;
    width: 125px;
    height: 75px;
    position: relative;
    padding: 18px;
    margin-bottom: 12px;
    .title{
      color: #000000;
      font-weight: bold;
      font-size: 17px;
      margin-bottom: 6px;
    }
    .link{
      display: inline-block;
      text-align: center;
      line-height: 20px;
      min-width: 50px;
      padding: 0 10px;
      height: 20px;
      border-radius: 10px;
      border: 1px solid #3A75C5;
      color: #3A75C5;
      font-size: 12px;
    }
    &.sjzq{
      background: url("@/assets/home/topic-event.png") no-repeat center center;
      background-size: 160px 111px;
    }
    &.spzq{
      background: url("@/assets/home/topic-video.png") no-repeat center center;
      background-size: 160px 111px;
    }
  }
}
</style>
